<template>
  <div class="app-container">
    <div class="header">
      <div class="left">
        <el-input v-model="keyword" clearable size="small" prefix-icon="el-icon-search" :disabled="isShowSearch" placeholder="请输入员工姓名进行搜索，可以直接回车进行搜索..." class="input" @keydown.enter.native="handleKeywordSearch" @clear="handleKeywordSearch" />
        <el-button size="small" type="primary" icon="el-icon-search" :disabled="isShowSearch" @click="handleKeywordSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="handleAdvancedSearch"><i :class="isShowSearch ? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'" aria-hidden="true" />高级搜索</el-button>
      </div>
      <div class="right">
        <el-upload action="/Emp/EmpBasic/import" :show-file-list="false" :disabled="importIsDisabled" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" style="display: inline-flex;margin-right: 10px">
          <el-button size="small" type="success" :disabled="importIsDisabled"><i :class="importDataBtnIcon" aria-hidden="true" />{{ importDataBtnText }}</el-button>
        </el-upload>
        <el-button size="small" type="success" @click="handleExport"><i class="fa fa-level-down" aria-hidden="true" />导出数据</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleCreate">添加员工</el-button>
      </div>
    </div>
    <transition name="slide-fade">
      <div v-show="isShowSearch" class="search">
        <el-row>
          <el-col :span="4">
            <span>政治面貌：</span>
            <el-select v-model="search.politicId" style="width: 150px" size="small" placeholder="政治面貌">
              <el-option
                v-for="item in politicsstatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <span>民族：</span>
            <el-select v-model="search.nationId" style="width: 150px" size="small" placeholder="民族">
              <el-option
                v-for="item in nation"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <span>职位：</span>
            <el-select v-model="search.posId" style="width: 150px" size="small" placeholder="职位">
              <el-option
                v-for="item in position"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <span>职称：</span>
            <el-select v-model="search.jobLevelId" style="width: 150px" size="small" placeholder="职称">
              <el-option
                v-for="item in jobLevel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="8" style="line-height: 32px">
            <span>聘用形式：</span>
            <el-radio-group v-model="search.engageForm">
              <el-radio label="劳务合同">劳务合同</el-radio>
              <el-radio label="劳动合同">劳动合同</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="4" class="depart">
            <span>所属部门：</span>
            <el-popover
              v-model="visibleSearch"
              placement="right"
              title="选择部门"
              width="250"
              trigger="manual"
            >
              <el-tree :data="departs" :props="defaultProps" default-expand-all @node-click="handleNodeClickSearch" />
              <div slot="reference" style="width: 150px;height: 30px;line-height: 30px;font-size: 13px;display: inline-flex;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;text-indent: 1em" @click="showDepartViewSearch"><span v-if="currentDepart === ''" class="placeholder">所属部门</span>{{ currentDepart }}</div>
            </el-popover>
          </el-col>
          <el-col :span="8">
            <span>入职日期：</span>
            <el-date-picker
              v-model="search.beginDateScope"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              unlink-panels
              size="small"
            />
          </el-col>
          <el-col :span="6" :offset="6">
            <el-button size="small" @click="resetAdvancedSearch">重置</el-button>
            <el-button size="small" type="primary" icon="el-icon-search" @click="confirmAdvancedSearch">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </transition>
    <div class="main">
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
        size="small"
        style="width: 100%"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="#67C23A33"
        :height="isShowSearch ? '600' : '700'"
      >
        <el-table-column
          type="selection"
          width="40"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="90"
          fixed
          align="left"
        />
        <el-table-column
          prop="workId"
          label="工号"
          width="80"
          align="left"
        />
        <el-table-column
          label="性别"
          width="50"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.gender === '男' ? 'primary' : 'danger'">
              <i v-if="scope.row.gender === '男'" class="fa fa-mars" aria-hidden="true" />
              <i v-else class="fa fa-venus" aria-hidden="true" />
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生日期"
          width="90"
          align="center"
        />
        <el-table-column
          prop="idCard"
          label="身份证号码"
          width="150"
          align="center"
        />
        <el-table-column
          prop="wedlock"
          label="婚姻状况"
          width="70"
          align="center"
        />
        <el-table-column
          prop="nation.name"
          label="民族"
          width="80"
          align="center"
        />
        <el-table-column
          prop="nativePlace"
          label="籍贯"
          width="80"
          align="center"
        />
        <el-table-column
          prop="politicsstatus.name"
          label="政治面貌"
          width="80"
          align="center"
        />
        <el-table-column
          prop="email"
          label="电子邮件"
          width="160"
          align="left"
        />
        <el-table-column
          prop="phone"
          label="电话号码"
          width="100"
          align="center"
        />
        <el-table-column
          prop="address"
          label="联系地址"
          width="300"
          align="left"
        />
        <el-table-column
          prop="department.name"
          label="所属部门"
          width="120"
          align="left"
        />
        <el-table-column
          prop="position.name"
          label="职位"
          width="100"
          align="left"
        />
        <el-table-column
          prop="jobLevel.name"
          label="职称"
          width="100"
          align="left"
        />
        <el-table-column
          prop="engageForm"
          label="聘用形式"
          width="80"
          align="left"
        />
        <el-table-column
          prop="beginDate"
          label="入职日期"
          width="90"
          align="center"
        />
        <el-table-column
          prop="conversionTime"
          label="转正日期"
          width="90"
          align="center"
        />
        <el-table-column
          prop="beginContract"
          label="合同起始日期"
          width="100"
          align="center"
        />
        <el-table-column
          prop="endContract"
          label="合同截止日期"
          width="100"
          align="center"
        />
        <el-table-column
          label="合同期限"
          width="70"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.contractTerm }}年
          </template>
        </el-table-column>
        <el-table-column
          prop="tiptopDegree"
          label="最高学历"
          width="70"
          align="center"
        />
        <el-table-column
          prop="school"
          label="毕业院校"
          width="150"
          align="left"
        />
        <el-table-column
          prop="specialty"
          label="专业"
          width="150"
          align="left"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button style="padding: 4px" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button style="padding: 4px" size="mini" type="primary" @click="handleDetail(scope.row)">查看高级资料</el-button>
            <el-button style="padding: 4px" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
      width="70%"
    >
      <div>
        <el-form ref="form" :model="row" :rules="rules">
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓名：" prop="name">
                <el-input v-model="row.name" style="width: 150px" size="small" prefix-icon="el-icon-edit" placeholder="员工姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="性别：" prop="gender">
                <el-radio-group v-model="row.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                  v-model="row.birthday"
                  style="width: 150px"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="出生日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌：" prop="politicId">
                <el-select v-model="row.politicId" style="width: 150px" size="small" placeholder="政治面貌">
                  <el-option
                    v-for="item in politicsstatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="民族：" prop="nationId">
                <el-select v-model="row.nationId" style="width: 150px" size="small" placeholder="民族">
                  <el-option
                    v-for="item in nation"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="籍贯：" prop="nativePlace">
                <el-input v-model="row.nativePlace" style="width: 150px" size="small" prefix-icon="el-icon-edit" placeholder="籍贯" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱：" prop="email">
                <el-input v-model="row.email" style="width: 200px" size="small" prefix-icon="el-icon-message" placeholder="电子邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系地址：" prop="address">
                <el-input v-model="row.address" style="width: 300px" size="small" prefix-icon="el-icon-edit" placeholder="联系地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="职位：" prop="posId">
                <el-select v-model="row.posId" style="width: 150px" size="small" placeholder="职位">
                  <el-option
                    v-for="item in position"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="职称：" prop="jobLevelId">
                <el-select v-model="row.jobLevelId" style="width: 150px" size="small" placeholder="职称">
                  <el-option
                    v-for="item in jobLevel"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="depart">
              <el-form-item label="所属部门：" prop="departmentId">
                <el-popover
                  v-model="visible"
                  placement="right"
                  title="选择部门"
                  width="250"
                  trigger="manual"
                >
                  <el-tree :data="departs" :props="defaultProps" default-expand-all @node-click="handleNodeClick" />
                  <div slot="reference" style="width: 150px;height: 30px;line-height: 30px;font-size: 13px;display: inline-flex;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;text-indent: 1em" @click="showDepartView"><span v-if="currentDepart === ''" class="placeholder">所属部门</span>{{ currentDepart }}</div>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话号码：" prop="phone">
                <el-input v-model="row.phone" style="width: 150px" size="small" prefix-icon="el-icon-phone" placeholder="电话号码" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="工号：" prop="workId">
                <el-input v-model="row.workId" style="width: 150px" size="small" disabled placeholder="工号" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="学历：" prop="tiptopDegree">
                <el-select v-model="row.tiptopDegree" style="width: 150px" size="small" placeholder="学历">
                  <el-option
                    v-for="item in tiptopDegree"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校：" prop="school">
                <el-input v-model="row.school" style="width: 150px" size="small" prefix-icon="el-icon-edit" placeholder="毕业院校" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业名称：" prop="specialty">
                <el-input v-model="row.specialty" style="width: 200px" size="small" prefix-icon="el-icon-edit" placeholder="专业名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="入职日期：" prop="beginDate">
                <el-date-picker
                  v-model="row.beginDate"
                  style="width: 150px"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="入职日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转正日期：" prop="conversionTime">
                <el-date-picker
                  v-model="row.conversionTime"
                  style="width: 150px"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="转正日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期：" prop="beginContract">
                <el-date-picker
                  v-model="row.beginContract"
                  style="width: 150px"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="合同起始日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同截止日期：" prop="endContract">
                <el-date-picker
                  v-model="row.endContract"
                  style="width: 150px"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="合同截止日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号码：" prop="idCard">
                <el-input v-model="row.idCard" style="width: 200px" size="small" prefix-icon="el-icon-edit" placeholder="身份证号码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式：" prop="engageForm">
                <el-radio-group v-model="row.engageForm">
                  <el-radio label="劳务合同">劳务合同</el-radio>
                  <el-radio label="劳动合同">劳动合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况：" prop="wedlock">
                <el-radio-group v-model="row.wedlock">
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetAll, GetAllNation, GetAllPoliticsstatus, GetAllPosition, GetAllJobLevel, GetMaxWorkId, GetAllDepartment, Create, Delete, Update } from '@/api/Emp/EmpBasic'

export default {
  name: 'EmpBasic',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      currentPage: 1,
      pageSizes: [20, 50, 100, 200, 500, 1000],
      pageSize: 20,
      keyword: '',
      row: {
        name: '',
        gender: '',
        birthday: '',
        idCard: '',
        wedlock: '',
        nationId: null,
        nativePlace: '',
        politicId: null,
        email: '',
        phone: '',
        address: '',
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: '',
        tiptopDegree: '',
        specialty: '',
        school: '',
        beginDate: '',
        workId: '',
        contractTerm: null,
        conversionTime: '',
        notWorkDate: null,
        beginContract: '',
        endContract: '',
        workAge: null
      },
      dialogVisible: false,
      nation: [],
      politicsstatus: [],
      position: [],
      jobLevel: [],
      tiptopDegree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
      visible: false,
      visibleSearch: false,
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentDepart: '',
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }, { pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '身份证号码格式不正确', trigger: 'blur' }],
        wedlock: [{ required: true, message: '请选择婚姻状况', trigger: 'blur' }],
        nationId: [{ required: true, message: '请选择民族', trigger: 'blur' }],
        nativePlace: [{ required: true, message: '请选择籍贯', trigger: 'blur' }],
        politicId: [{ required: true, message: '请选择政治面貌', trigger: 'blur' }],
        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
        address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请选择所属部门', trigger: 'blur' }],
        jobLevelId: [{ required: true, message: '请选择职称', trigger: 'blur' }],
        posId: [{ required: true, message: '请选择职位', trigger: 'blur' }],
        engageForm: [{ required: true, message: '请选择聘用方式', trigger: 'blur' }],
        tiptopDegree: [{ required: true, message: '请输入最高学历', trigger: 'blur' }],
        specialty: [{ required: true, message: '请输入专业', trigger: 'blur' }],
        school: [{ required: true, message: '请输入毕业院校', trigger: 'blur' }],
        beginDate: [{ required: true, message: '请选择入职日期', trigger: 'blur' }],
        conversionTime: [{ required: true, message: '请选择转正日期', trigger: 'blur' }],
        beginContract: [{ required: true, message: '请选择合同开始日期', trigger: 'blur' }],
        endContract: [{ required: true, message: '请选择合同结束日期', trigger: 'blur' }]
      },
      title: '',
      importDataBtnText: '导入数据',
      importDataBtnIcon: 'fa fa-level-up',
      importIsDisabled: false,
      isShowSearch: false,
      search: {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: null,
        departmentId: null,
        beginDateScope: null
      }
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    getAll(type) {
      this.loading = true
      var url = `page=${this.currentPage}&size=${this.pageSize}&`
      if (type && type === 'advanced') {
        if (this.search.politicId) {
          url += `politicId=${this.search.politicId}&`
        } else if (this.search.nationId) {
          url += `nationId=${this.search.nationId}&`
        } else if (this.search.posId) {
          url += `posId=${this.search.posId}&`
        } else if (this.search.jobLevelId) {
          url += `jobLevelId=${this.search.jobLevelId}&`
        } else if (this.search.engageForm) {
          url += `engageForm=${this.search.engageForm}&`
        } else if (this.search.departmentId) {
          url += `departmentId=${this.search.departmentId}&`
        } else if (this.search.beginDateScope) {
          url += `beginDateScope=${this.search.beginDateScope}&`
        }
      } else {
        url += `name=${this.keyword}&`
      }
      GetAll(url).then((res) => {
        if (res) {
          this.list = res.data
          this.total = res.total
          this.loading = false
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getAll()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAll()
    },
    handleKeywordSearch() {
      this.currentPage = 1
      this.getAll()
    },
    handleCreate() {
      this.initData()
      this.GetMaxWorkId()
      this.title = '添加员工'
      this.dialogVisible = true
    },
    initData() {
      if (!window.sessionStorage.getItem('nation')) {
        GetAllNation().then((res) => {
          if (res) {
            this.nation = res
            window.sessionStorage.setItem('nation', JSON.stringify(res))
          }
        })
      } else {
        this.nation = JSON.parse(window.sessionStorage.getItem('nation'))
      }
      if (!window.sessionStorage.getItem('politicsstatus')) {
        GetAllPoliticsstatus().then((res) => {
          if (res) {
            this.politicsstatus = res
            window.sessionStorage.setItem('politicsstatus', JSON.stringify(res))
          }
        })
      } else {
        this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'))
      }
      if (!window.sessionStorage.getItem('position')) {
        GetAllPosition().then((res) => {
          if (res) {
            this.position = res
            window.sessionStorage.setItem('position', JSON.stringify(res))
          }
        })
      } else {
        this.position = JSON.parse(window.sessionStorage.getItem('position'))
      }
      if (!window.sessionStorage.getItem('jobLevel')) {
        GetAllJobLevel().then((res) => {
          if (res) {
            this.jobLevel = res
            window.sessionStorage.setItem('jobLevel', JSON.stringify(res))
          }
        })
      } else {
        this.jobLevel = JSON.parse(window.sessionStorage.getItem('jobLevel'))
      }
    },
    GetMaxWorkId() {
      GetMaxWorkId().then((res) => {
        if (res) {
          this.row.workId = res.object
        }
      })
    },
    showDepartView() {
      if (!this.visible && this.departs.length === 0) {
        GetAllDepartment().then((res) => {
          if (res) {
            this.departs = res
            this.visible = true
          }
        })
      } else {
        this.visible = !this.visible
      }
    },
    showDepartViewSearch() {
      if (!this.visibleSearch && this.departs.length === 0) {
        GetAllDepartment().then((res) => {
          if (res) {
            this.departs = res
            this.visibleSearch = true
          }
        })
      } else {
        this.visibleSearch = !this.visibleSearch
      }
    },
    handleNodeClick(data) {
      this.currentDepart = data.name
      this.row.departmentId = data.id
      this.visible = false
    },
    handleNodeClickSearch(data) {
      this.currentDepart = data.name
      this.search.departmentId = data.id
      this.visibleSearch = false
    },
    confirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.visible = false
          if (!this.row.id) {
            Create(this.row).then((res) => {
              if (res) {
                this.getAll()
                this.dialogVisible = false
                this.initRow()
              }
            })
          } else {
            Update(this.row).then((res) => {
              if (res) {
                this.getAll()
                this.dialogVisible = false
                this.initRow()
              }
            })
          }
        }
      })
    },
    cancel() {
      this.visible = false
      this.dialogVisible = false
      this.initRow()
    },
    initRow() {
      this.row = {
        name: '',
        gender: '',
        birthday: '',
        idCard: '',
        wedlock: '',
        nationId: null,
        nativePlace: '',
        politicId: null,
        email: '',
        phone: '',
        address: '',
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: '',
        tiptopDegree: '',
        specialty: '',
        school: '',
        beginDate: '',
        workId: '',
        contractTerm: null,
        conversionTime: '',
        notWorkDate: null,
        beginContract: '',
        endContract: '',
        workAge: null
      }
      this.currentDepart = ''
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除【' + row.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(row.id).then((res) => {
          if (res) {
            this.getAll()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleUpdate(row) {
      this.initData()
      Object.assign(this.row, row)
      this.currentDepart = row.department.name
      this.title = '编辑员工信息'
      this.dialogVisible = true
    },
    handleExport() {
      window.open('/Emp/EmpBasic/export', '_parent')
    },
    beforeUpload() {
      this.importDataBtnText = '正在导入'
      this.importDataBtnIcon = 'fa fa-spinner'
      this.importIsDisabled = true
    },
    onSuccess() {
      this.importDataBtnText = '导入数据'
      this.importDataBtnIcon = 'fa fa-level-up'
      this.importIsDisabled = false
      this.getAll()
    },
    onError() {
      this.importDataBtnText = '导入数据'
      this.importDataBtnIcon = 'fa fa-level-up'
      this.importIsDisabled = false
    },
    handleAdvancedSearch() {
      this.isShowSearch = !this.isShowSearch
      this.initData()
    },
    confirmAdvancedSearch() {
      this.visibleSearch = false
      this.getAll('advanced')
    },
    resetAdvancedSearch() {
      this.search = {
        politicId: null,
        nationId: null,
        posId: null,
        jobLevelId: null,
        engageForm: null,
        departmentId: null,
        beginDateScope: null
      }
      this.currentDepart = ''
      this.visibleSearch = false
      this.getAll('advanced')
    }
  }
}
</script>

<style lang="scss" scope>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .fa {
    margin-right: 5px;
    font-size: 14px;
  }

  .left {
    .input {
      width: 350px;
      margin-right: 10px;
    }
  }
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.search {
  border: 1px solid #409EFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 10px 0;
}

.main {
  margin-top: 15px;
}

.footer {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.depart .placeholder {
  font-size: 14px;
  color: #C0C4CC;
}
</style>
